<script setup ts>
import { ref,watch } from 'vue';
import { defineProps,onMounted } from 'vue';
import { IotApi } from '../js/apis';
import HeaderBar from '../components/HeaderBar.vue';
import * as atom from '../js/atom';


const params = defineProps({
    device_id: String
});
const now = atom.now_str('yyyy-mm-dd');
const from_date = ref(now);
const to_date = ref(now);
const records = ref([]); //喂食记录

const update_record=()=>{
    IotApi.get_feeding_records(params.device_id, from_date, to_date, 0, 0).then((value)=>{
        records.value = value
    },(reason)=>{
        alert(reason);
    }).catch((reason)=>{
        alert(reason);
    })
};

onMounted(()=>{
    update_record();
});
const on_date_change=(value, oldvalue)=>{
    
}
watch(from_date, on_date_change);
watch(to_date, on_date_change)
</script>

<template>

    <div class="client">
        <div class="fixed_area">
            <HeaderBar :back=true title="喂食记录" ></HeaderBar>
            <!--
            <div class="filter_area">
                <a>从</a>
                <input type="date" v-model="from_date">
                <a>到</a>
                <input type="date" v-model="to_date">
            </div>
            -->
        </div>
        <div class="back_area"><a class="back_area_height"></a></div>
        <div class="item-area">
            <div class="feed-item" v-for="rec in records">
                <a>{{ rec.time.substring(0, 10) }}</a>
                <a>{{ rec.time.substring(11, 16) }}</a>
                <a>出粮{{ rec.set }}份</a>
            </div>
        </div>
    </div>

</template>

<style scoped>
.client{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100;
    overflow: auto; 
}

.fixed_area{
    display: flex;
    position: fixed;
    width: 100%;
    height: 3rem;
    /*position: absolute;*/
    left: 0;
    top: 0;
    flex-direction: column;
}
.filter_area{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: white;
    box-shadow: 0px 2px 2px -1px rgba(131, 131, 131, 0.6);
    /*background-color: aqua;*/
}

.back_area{
    display: flex;
    /*background-color: blueviolet;*/
}
.back_area_height{
    height: 3rem;
}
.feed-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-bottom: 1px solid #c7c7c7;

}

.item-area{
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;

}
a{
    margin-right: 1rem;
    font-size: small;
}
input{
    margin-right: 1rem;
}
</style>